<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <title>Goods</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Custom Theme files -->
    <!--theme-style-->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="New Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!--fonts-->
    <!--    <link href='http://fonts.useso.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>-->
    <!--    <link href='http://fonts.useso.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>-->
    <!--//fonts-->
    <!-- start menu -->
    <link href="css/memenu.css" rel="stylesheet" type="text/css" media="all"/>
    <script type="text/javascript" src="js/memenu.js"></script>
    <script>$(document).ready(function () {
        $(".memenu").memenu();
    });</script>
    <script src="js/simpleCart.min.js"></script>
    <style>
        .pagebtn{
            padding: 5px 15px;
            cursor: pointer;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        .pagebtn:hover{
            background-color: #e0e0e0;
        }
    </style>
</head>
<body>
<!--header-->
<div class="header">
    <div class="header-top">
        <div class="container">
            <div class="search">
                <form action="shopping/goods" style="display: flex; gap: 8px;">
                    <input type="text" placeholder="Search" name="keywords">
                    <!--                    <input type="text" value="Search " onfocus="this.value = '';"-->
                    <!--                           onblur="if (this.value == '') {this.value = 'Search';}">-->
                    <button type="button" name="searchbtn" class="layui-btn layui-btn-sm layui-btn-primary" >搜索</button>
                </form>
            </div>
            <div class="header-left">
                <ul>
                    <li><a href="shopping/userinfo">User</a></li>
                    <!--                    <li><a href="shopping/login">Login</a></li>-->
                    <!--                    <li><a href="shopping/register">Register</a></li>-->
                    <li>
                    </li>

                </ul>
                <div class="cart box_1">
                    <a href="shopping/cart">
                        <h3>
                            <div class="total">
                                <span class="simpleCart_total"></span> (<span id="simpleCart_quantity"
                                                                              class="simpleCart_quantity"></span> items)
                            </div>
                            <img src="images/cart.png" alt=""/></h3>
                    </a>
                    <p><a href="javascript:;" class="simpleCart_empty">Empty Cart</a></p>

                </div>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="container">
        <div class="head-top">
            <div class="logo">
                <a href="shopping/index"><img src="images/logo.png" alt=""></a>
            </div>
            <div class=" h_menu4">
                <ul class="memenu skyblue">
                    <li class="active grid"><a class="color8" href="shopping/index">Home</a></li>
                    <li><a class="color1" href="shopping/goods">Shop</a>
                        <div class="mepanel">
                            <div class="row">
                                <div class="col1">
                                    <div class="h_nav">
                                        <ul name="fenlei">
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="clearfix"></div>
        </div>
    </div>

</div>


<!--content-->
<!---->
<div class="product">
    <div class="container">
        <div class="col-md-3 product-price">

            <div class=" rsidebar span_1_of_left">
                <div class="of-left">
                    <h3 class="cate">Categories</h3>
                </div>
                <ul class="menu fenleilist">

                </ul>
            </div>
            <!--initiate accordion-->
            <script type="text/javascript">
                $(function () {
                    var menu_ul = $('.menu > li > ul'),
                        menu_a = $('.menu > li > a');
                    menu_ul.hide();
                    menu_a.click(function (e) {
                        e.preventDefault();
                        if (!$(this).hasClass('active')) {
                            menu_a.removeClass('active');
                            menu_ul.filter(':visible').slideUp('normal');
                            $(this).addClass('active').next().stop(true, true).slideDown('normal');
                        } else {
                            $(this).removeClass('active');
                            $(this).next().stop(true, true).slideUp('normal');
                        }
                    });

                });
            </script>

            <!---->

            <div class="product-middle">

                <div class="fit-top">
                    <h6 class="shop-top">More Products</h6>
                    <a href="shopping/goods" class="shop-now">SHOP NOW</a>
                    <div class="clearfix"></div>
                </div>
            </div>

        </div>
        <div class="col-md-9 product1">
            <div class=" bottom-product goodslist">

            </div>

        </div>
        <div class="clearfix"></div>

        <div class="easypage" style="display: flex; align-items: center; gap: 10px; font-family: Arial, sans-serif; position: absolute; left: 50%; transform: translateX(-50%);">
            <button id="prev" type="button" class="pagebtn" onclick="lastpage()">上一页</button>
            <input disabled id="pageInput" value="1" style="width: 50px; text-align: center; padding: 5px;">
            <button id="next" type="button" class="pagebtn" onclick="nextpage()">下一页</button>
            <div id="totalPages" style="position: absolute; margin-top:60px; margin-left:93px; font-size: 0.9em; color: #666;"><span>共6页</span></div>
        </div>
<!--        <nav class="in">-->
<!--            <ul class="pagination">-->
<!--                <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>-->
<!--                <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>-->
<!--                <li><a href="#">2 <span class="sr-only"></span></a></li>-->
<!--                <li><a href="#">3 <span class="sr-only"></span></a></li>-->
<!--                <li><a href="#">4 <span class="sr-only"></span></a></li>-->
<!--                <li><a href="#">5 <span class="sr-only"></span></a></li>-->
<!--                <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span> </a></li>-->
<!--            </ul>-->
<!--        </nav>-->
    </div>

</div>

<!---->

<!--//content-->
<div class="footer">
    <div class="footer-class">
        <p><a>祝您购物愉快♥</a></p>
    </div>
</div>


<script src="layui/layui.all.js"></script>

<script>
    const $ = layui.$;
    //声明，需要用到分页



    var params = new URLSearchParams(window.location.search);
    var categoryid = params.get('categoryid');
    var keywords= params.get('keywords');


    var data={};
    if(categoryid){
        data.categoryid=categoryid;
    }
    if(keywords){
        data.keywords=keywords;
    }



    //右上角shop隐藏框内内容
    function getCategory() {
        $.ajax({
            url: "index/list",
            data: {},
            async: false,
            success: function (data) {
                $(".fenleilist").empty();
                for (let i = 0; i < data.length; i++) {
                    $("[name='fenlei']").append("<li><a href='shopping/goods'>" + data[i].name + "</a></li>");
                    $(".fenleilist").append("<li ><a href='shopping/goods'>" + data[i].name + "</a><ul class='item" + i + "' class='cute'></ul></li>");
                }

                for (let i = 0; i < data.length; i++) {
                    let aaa = ".item";
                    aaa = aaa + i;
                    $(aaa).empty();
                    for (let j = 0; j < data[i].children.length; j++) {
                        $(aaa).append("<li class='subitem" + j + "'><a href='shopping/goods?categoryid="+data[i].children[j].id+"'>" + data[i].children[j].name + "</a></li>");
                    }
                }
            }
        });
    }
    getCategory();

    // let pagee = document.getElementById('pageInput').value;
    // let pagenow=parseInt(pagee) || 0;


    let pagenow = parseInt(document.getElementById('pageInput').value);
    let pageall = pagenow;


    function getGoods(){
        $.ajax({
            url: "goods/goodsLists",
            data: data,
            async: false,
            success: function (goods) {
                pageall=Math.ceil(goods.length/15);
                $("#totalPages").html("<span>共"+pageall+"页</span>");
                pagenow = parseInt(document.getElementById('pageInput').value);
                $(".goodslist").empty();
                for (let i = (pagenow*15-15); i < goods.length&&i<(pagenow*15); i++) {
                    if(i%3===0&&i!==0){
                        $(".goodslist").append("<div class='clearfix'></div><div class=' bottom-product'>");
                    }
                    $(".goodslist").append("<div class='col-md-4 bottom-cd simpleCart_shelfItem'><div class='product-at '><a href='shopping/single?id="+goods[i].id+"'><img class='img-responsive' src='"
                        +goods[i].defaultimg+"' alt=''><div class='pro-grid'><span class='buy-in'>加入购物车</span></div></a></div><p class='tun'><h4>"+goods[i].name
                        +"</h4><span style='display: inline-block; max-width: 36ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: monospace; color: #00008B;'>"
                        +goods[i].info+"</span></p><a href='#' class='item_add'><p class='number item_price'><i> </i>￥ &nbsp;"+goods[i].price+"</p></a></div>");
                }
                $(".goodslist").append("<div class='clearfix'></div>");
            }
        });
    }
    getGoods();

    function easyCart() {
        $.ajax({
            url: "cart/list",
            data: {},
            async: false,
            success: function (cart) {
                let sumprice=0;
                let i=0;
                for (i = 0; i < cart.length; i++) {
                    sumprice+=(cart[i].number*cart[i].goods.price);
                }
                sumprice=Math.ceil(sumprice * 100) / 100;
                $(".total").html("<span>￥ &nbsp;&nbsp; "+sumprice+"</span>(<span>"+i+"</span>items)");
                if(cart.length!==0){
                    $(".simpleCart_empty").text(" ");
                }
            }
        });
    }
    easyCart();

    function lastpage(){
        if(pagenow>1){
            pagenow=pagenow-1;
            // pageInput.value=pagenow;
            document.getElementById('pageInput').value=pagenow;
            getGoods();
        }else{
            layer.msg("已经是第一页了");
        }
    }
    function nextpage(){
        if(pagenow<pageall){
            pagenow=pagenow+1;
            // pageInput.value=pagenow;
            document.getElementById('pageInput').value=pagenow;
            getGoods();

        }else{
            layer.msg("已经是最后一页了");
        }
    }

    $("[name='searchbtn']").click(function () {
        let searchtext=$("input[name='keywords']").val();
        location.href="shopping/goods?keywords="+searchtext;
    });




</script>
</body>
</html>
			